import Typography from "@/views/components/Typography";
import RenderTimeLift from '@/components/CommonHtml/ComputeLastTime';
import { Space, Button, Popover } from "antd";
import ShopIcons from "@/views/components/ShopIcons";
import GoodsDetail from './GoodsDetail.jsx';
import { getCellRenderComp } from '../CellRender/index.jsx';
import moment from "moment";
import { interCeptMap, refundStatusMap, afterSalesTypeMap, afterSalesStateMap } from '../../config/enum.js';

//字段配置列
const columnsConfig = {
	'dataIndex': {
		title: "序号",
		code: "dataIndex",
		lock: true,
		render(v, r, i) {
			return i + 1;
		}
	},
	'afterSaleSn': {
		title: '售后单号',
		code: 'afterSaleSn',
		render: t => <Typography >{t}</Typography>
	},
	'orderSn': {
		title: '内部系统订单号',
		code: 'orderSn',
	},
	'platRefundState': {
		title: '平台售后状态',
		code: 'platRefundState',
		render: (t, r) => {
			return (
				<Space>
					<div>{afterSalesStateMap[t]}</div>
					{[0, 2, 3, 6, 7].includes(r.platRefundState) && r.processingTimeRemain && <RenderTimeLift planTime={r.processingTimeRemain} realTime={Date.now()} />}
				</Space>
			)
		}
	},
	'afterType': {
		title: '售后类型',
		code: 'afterType',
		render: (t, r) => {
			return (
				<div>
					<div>{afterSalesTypeMap[t]}</div>
					{[3, 7].includes(t) &&
						<Popover
							title="补发/换货商品详情"
							trigger={['click']}
							content={<GoodsDetail type="aftersales" goodsList={r.goodsList} data={r.reissueGoodsList} />}
							getPopupContainer={triggerNode => triggerNode.parentNode || document.body}
						>
							<Button style={{ paddingLeft: 0 }} type="link">查看商品</Button>
						</Popover>
					}
				</div>
			)
		}
	},
	'goodsList': {
		title: '平台商品信息',
		code: 'goodsList',
	},
	'refundConfirm': {
		title: '货物状态',
		code: 'refundConfirm',
		render: (t, r) => {
			return (
				<div>
					<div>{r.unpackTime ? '卖家已收货' : '卖家未收货'}</div>
					{
						r.goodsList.map((k, i) => (
							<div key={i}>
								{(k.unpackGoodsStateText ?
									k.unpackGoodsStateText.split().map((v, index) => (
										<div key={index} style={{ color: '#0068FF' }}>{v}</div>
									))
									: null)}
							</div>
						))
					}
				</div>
			)
		}
	},
	'refundLogisticsNo': {
		title: '退货快递单号',
		code: 'refundLogisticsNo',
		render: (t, r) => {
			const val = refundStatusMap[r.refundStatus] || {};
			return (
				<Space>
					<div>{t}</div>
					<div>{r.refundLogisticsCompany}</div>
					<div style={{ color: val.color }}>{val.text}</div>
					<div>{r.refundConfirm == 1 ? <span className="common-color10">已收货</span> : <span className="common-color13">未收货</span> }</div>
				</Space>
			)
		}
	},
	'autoInterceptStatus': {
		title: '拦截状态',
		code: 'autoInterceptStatus',
		render: t => {
			return interCeptMap[t];
		}
	},
	'processTimeStart': {
		title: '处理时间',
		code: 'processTimeStart',
		render: t => {
			return t ? moment(t).format('YYYY-MM-DD HH:mm:ss') : '';
		}
	},
	'unpackTime': {
		title: '售后拆包时间',
		code: 'unpackTime',
		render: t => {
			return t ? moment(t).format('YYYY-MM-DD HH:mm:ss') : '';
		}
	},
	'processTimeEnd': {
		title: '处理完成时间',
		code: 'updateTime',
		render: t => {
			return t ? moment(t).format('YYYY-MM-DD HH:mm:ss') : '';
		}
	},
	'platRefundSn': {
		title: '平台退款单号',
		code: 'platRefundSn',
	},
	'outOrderSn': {
		title: '平台店铺订单号',
		code: 'outOrderSn',
		render: (t, r) => {
			return (
				<Space>
					<div>{t}</div>
					{ r.autoInterceptLabelText && <span style={{ background: '#FF8D1A', marginTop: '4px', padding: '0px 2px', borderRadius: '2px', color: '#fff' }}>{r.autoInterceptLabelText}</span>}
				</Space>
			)
		}
	},
	'reason': {
		title: '售后原因问题',
		code: 'reason',
	},
	'refundRemarks': {
		title: '退货备注',
		code: 'refundRemarks',
	},
	'buyerNickName': {
		title: '买家昵称',
		code: 'buyerNickName',
	},
	'ecStoreName': {
		title: '所属店铺',
		code: 'ecStoreName',
		render: (t, r) => {
			return (
				<Space>
					<ShopIcons type={r['orderChannel']} />
					<div>{t}</div>
				</Space>
			)
		}
	},
	'applyTime': {
		title: '申请时间',
		code: 'applyTime',
		render: t => {
			return t ? moment(t).format('YYYY-MM-DD HH:mm:ss') : '';
		}
	},
	'reissueShipState': {
		title: '售后发货状态',
		code: 'reissueShipState',
		render: t => {
			return t == 2 ? '已发货' : '未发货';
		}
	},
	'reissueOrderNo': {
		title: '换货/补发订单单号',
		code: 'reissueOrderNo',
	},
	'reissueLogisticsNo': {
		title: '换货/补发快递单号',
		code: 'reissueLogisticsNo',
		render: (t, r) => {
			return (
				<div>
					<div>{t}</div>
					<div>{r.reissueLogisticsCompany}</div>
				</div>
			)
		}
	},
	'rejectReason': {
		title: '拒绝原因',
		code: 'rejectReason',
	},
}

//获取当前的列函数
export const getColumnsData = (props) => {
	const { columns } = props;
	const customRender = getCellRenderComp(props);
	const arr = [];
	for (let i in columns) {
		const obj = columns[i];
		const item = columnsConfig[obj.code];
		const customRenderData = customRender[obj.code];
		//单独的title渲染和render函数渲染
		if (customRenderData) {
			customRenderData.title && (item.title = customRenderData.title());
			customRenderData.render && (item.render = customRenderData.render);
		}
		if (obj.checked && item) {
			arr.push({
				...item,
				width: obj.width,
				lock: obj.lock
			})
		}
	}
	return arr;
}